<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 300px;
            width: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box" id="container">
        <p id="item1" class="p1">AAAAA</p>
        <p id="item2">BBBBB</p>
        <p id="item3" class="p1">CCCCC</p>
        <p id="item4">DDDDD</p>
    </div>
    <script>
        console.log("--------------获取页面元素----------------");
        //根据id获取
        var div_container = document.getElementById("container");
        console.log(div_container);
        //根据类名获取
        var p_p1 =  document.getElementsByClassName("p1");
        console.log(p_p1);
        //根据标签名获取
        var p_tag = document.getElementsByTagName("p");
        console.log(p_tag);
        console.log("--------------查找子标签----------------");
        //所有的子标签
        var children  =  div_container.children;
        console.log(children);
        var firstChildren =div_container.firstElementChild;
        console.log(firstChildren);
        console.log("--------------查找父标签----------------");
        /*  <p id="item3" class="p1">CCCCC</p> */
        var p_itme3 = document.getElementById("item3");
        console.log(p_itme3);

        var parentEle = p_itme3.parentElement;
        console.log(parentEle);
        console.log("--------------查找兄弟标签----------------");
        var nextEle = p_itme3.nextElementSibling;
        console.log(nextEle);
        var previousEle =  p_itme3.previousElementSibling;
        console.log(previousEle);
  
    </script>


</body>
</html>